<template>
  <div>
    <Snackbars :value="isnotice" :text="text" />
    <div class="addCommentBtn">
      <v-btn fab dark :color="'#E91E63'" @click="openDialog">
        <v-icon dark> mdi-plus </v-icon>
      </v-btn>
      <v-dialog
        :hide-overlay="true"
        transition="dialog-bottom-transition"
        v-model="isDialog"
      >
        <v-card>
          <v-toolbar :color="'#E91E63'" dark>发表评论</v-toolbar>
          <v-card-text>
            <div style="margin: 2vh">
              <v-textarea
                clearable
                prepend-inner-icon="mdi-comment"
                clear-icon="mdi-close-circle"
                label="信息内容"
                v-model="msg"
              ></v-textarea>
            </div>
          </v-card-text>
          <v-card-actions class="justify-end">
            <v-btn text @click="sendMsg">发送</v-btn>
            <v-btn text @click="closeDialog">关闭</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Snackbars from "@/components/Snackbars";
import {subCommentAns,subComment} from '@/api/comment'
export default Vue.extend({
  name: "AddComment",
  data: () => ({
    isDialog: false,
    text: "",
    isnotice: false,
    msg: "",
  }),
  components: {
    Snackbars,
  },
  methods: {
    closeDialog() {
      this.isDialog = false;
    },
    openDialog() {
      if(!this.$store.state.user.userName){
        this.text = '请登录后再发表评论'
        this.isnotice = true
        setTimeout(() => {
          this.isnotice = false
          this.text = ''
        },2000)
        return
      }
      this.isDialog = true;
    },
    //发表评论
    sendMsg() {
      if (this.msg) {
        const time = new Date().getTime()
        subComment(this.msg,time)
            .then(res => {
              const {code,msg} = res as unknown as subCommentAns
              if(code === 200){
                this.msg = ''
                this.$store.dispatch('comment/getCommentInfo')
              }
                this.text = msg
                this.isnotice = true
              setTimeout(() => {
                  this.isnotice = false
                  this.text = ''
                },2000)
            })    
      } else {
        (this.text = "文本不能为空"), (this.isnotice = true);
        setTimeout(() => {
          this.isnotice = false;
          this.text = "";
        }, 2000);
      }
    },
  }
});
</script>

<style lang="scss">
.addCommentBtn {
  position: absolute;
  bottom: 0vh;
  right: 4vw;
  transform: translateY(50%);
}
</style>